<template>
	<view>
        <public-module></public-module>
        <wlk-navbar :isShowLeft="false" title="洗护篮" navbarType='0' ></wlk-navbar>
        <view class="head-fixed wlkflex justify-between pd30 bgw wd100 bgw" :style="{top:systemInfo.tabbarH+systemInfo.navigationBarHeight+'px'}">
            <view class="left col9">洗护篮共{{total}}件商品</view>
            <view class="right" @click="edit()">{{nowStatus=='init'?'编辑':'完成'}}</view>
        </view>
        <block v-if="!loading && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.car"
                        text="洗护篮为空"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="goods-list">
                <u-checkbox-group
                        v-model="checkGoodsBox"
                        placement="column"
                        @change="checkGoodsChange"
                >
                    <view class="goods shadow br08 wlkflex mb20 justify-between" v-for="(item,index) in list">
                        <u-checkbox :disabled="item.quantity>item.goods.stock" size="21" iconSize="16" :activeColor="themeColor" class="checkbox" :name="item.goods_id" shape="circle" v-model="item.checked">
                        </u-checkbox>
                        <view class="wlkflex justify-between align-start"  @click="$Router.push('/pages/goods/detail?id='+item.goods_id)">
                            <image :src="item.goods.images[0]" class="br08"  mode="aspectFill"></image>
                            <view class="info wlkflex wrap align-content-between">
                                <view class="wd100">
                                    <view class="title u-line-1">{{item.goods.title}}</view>
                                    <view class="desc u-line-1" v-if="item.quantity>item.goods.stock">库存不足</view>
                                </view>
                                <view class="wd100 money wlkflex justify-between align-end">
                                    <view class="left">
                                        <view class="price mt10"><text class="mr05">¥</text>{{item.goods.price}}</view>
                                        <view class="vip-price mt10"><text class="mr05">¥</text>{{item.goods.vip_price}} <text class="ml10">会员价</text></view>
                                    </view>
                                    <view class="right">
                                        <u-number-box @change="(e) => editCart(e, index)" :name="item.goods_id" v-model="item.quantity" min="1" :disablePlus="item.quantity>=item.goods.stock"  :disabledInput="true"></u-number-box>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-checkbox-group>

            </view>
        </block>
        <view class="foot-fixed wd100 pd30 bgw wlkflex justify-between" :style="{bottom:cartBottom}">
            <view class="wlkflex">
                <u-checkbox-group
                        placement="column"
                        @change="checkAll"
                        v-model="checkAllBox"
                >
                    <view class="wlkflex">
                        <u-checkbox size="21" iconSize="16" name="all" :activeColor="themeColor" class="checkbox" shape="circle" ></u-checkbox>
                        <view class="ml05">全选</view>
                    </view>
                </u-checkbox-group>
                <view v-if="nowStatus=='init' && !$u.test.isEmpty(checkGoodsBox)" class="total-price ml20">总价:<text class="mr05 ml05">￥</text> {{price}}</view>
            </view>


            <view class="buy-btn">
                <block v-if="nowStatus=='init'">
                    <u-button :customStyle="{
                                height:'70rpx',
                                fontSize:'14px',
                                width:'180rpx'
                            }" :color="themeColor" :disabled="$u.test.isEmpty(checkGoodsBox)" size="normal" shape="circle" text="去结算" @click="buy"></u-button>

                </block>
                <block v-else>
                    <u-button :customStyle="{
                               height:'70rpx',
                                fontSize:'14px',
                                width:'180rpx'
                            }" :color="themeColor" :disabled="$u.test.isEmpty(checkGoodsBox)" plain size="normal" shape="circle" text="删除" @click="delCart"></u-button>

                </block>
             </view>
        </view>
        <wlk-tabbar></wlk-tabbar>
    </view>
</template>

<script>
    import { cal } from '@/wlkutils/cal'
    var _self;
    import base from '@/base.js';
    import {
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex';
	export default {
        computed: {
            ...mapGetters(['themeColor','isLogin','uEmpty','userInfo'])
        },
		data() {
			return {
			    list:[],
                checkGoodsBox:[],
                checkAllBox:[],
                loading:true,
                total:0,
                price:0,
                nowStatus:'init',
                systemInfo:base.systemInfo,
                cartBottom:0,
                checkTotal:0,

			}
		},
		onLoad() {
            uni.hideTabBar();
            this.cartBottom = uni.$u.addUnit(50+this.systemInfo.tabbarPaddingB, 'px')
		},
        onShow() {
             _self=this;
             console.log('show')
             if(this.isLogin){
                 _self.getData();
             }
        },
        onReady() {

        },
        watch:{
            isLogin(val){
                this.getData();
            }
        },
		methods: {
            edit(){
              if(this.nowStatus == 'init'){
                  this.nowStatus = 'edit';
              }else{
                  this.nowStatus = 'init';
              }
                this.checkGoodsBox = [];
                this.checkAllBox = [];
            },
            checkAll(n){
                if(this.total==0){
                    return;
                }
                var allStatus = !uni.$u.test.isEmpty(n)?true:false;
                if(!allStatus){
                    _self.checkGoodsBox = [];
                }
                _self.list.forEach((item,index)=>{
                    if(allStatus && item.goods.stock>0){
                        _self.list[index].checked = true;
                        _self.checkGoodsBox.push(_self.list[index].goods_id)
                    }else if(!allStatus){
                        _self.list[index].checked = false;
                    }
                });
                this.calculate();
            },
            getData(){
                uni.$u.http.post('cart/getList', {
                }).then(res => {
                    _self.list = res.data.list;
                    _self.total = res.data.total;
                    _self.loading = false;
                    _self.calculate();
                }).catch(res => {
                    _self.loading = false;
                })
            },
            checkGoodsChange(n) {
                if(n.length == this.total){
                    this.checkAllBox.push('all');
                }else{
                    this.checkAllBox = [];
                }
                _self.list.forEach((item,index)=>{
                    if(n.includes(item.goods_id)){
                        _self.list[index].checked = true;
                    }else{
                        _self.list[index].checked = false;
                    }
                })
                this.calculate();
            },


            editCart(v,index){
                uni.$u.http.post('cart/edit', {
                    id:v.name,
                    quantity:v.value
                }).then(res => {
                    _self.calculate();
                }).catch(err => {
                })
            },
            delCart(){
                if(!uni.$u.test.isEmpty(this.checkGoodsBox)){
                    uni.$u.http.post('cart/del', {
                        ids:this.checkGoodsBox.join(','),
                    }).then(res => {
                        let filteredArray =  _self.list.filter(item => !_self.checkGoodsBox.includes(item.goods_id));
                        _self.list = JSON.parse(JSON.stringify(filteredArray));
                        _self.checkGoodsBox = [];
                        _self.checkAllBox = [];
                        _self.calculate();
                    }).catch(err => {
                    })
                }
            },
            calculate(){
                if(this.nowStatus == 'init'){
                    let isVip = false;
                    if(_self.isLogin && _self.userInfo.card && _self.userInfo.card.status == 'normal'){
                        isVip = true;
                    }
                    this.price = 0;
                    _self.list.forEach((item,index)=>{
                        if(item.checked){
                            if(isVip){
                                _self.price = cal.jia(_self.price,cal.cheng(item.goods.vip_price,item.quantity))
                            }else{
                                _self.price = cal.jia(_self.price,cal.cheng(item.goods.price,item.quantity))
                            }
                        }
                    })
                }
            },
            buy(){
                var arr = new Array();
                _self.list.forEach((item,index)=>{
                    if(item.checked){
                        let obj = new Object();
                        obj.id = item.goods_id;
                        obj.cartId = item.id;
                        obj.quantity = item.quantity;
                        arr.push(obj);
                    }
                    _self.list[index].checked = false;
                });
                _self.checkGoodsBox = [];
                _self.checkAllBox = [];
                this.$Router.push({
                    path: '/pages/goods/create',
                    query: arr
                });
            }

		}
	}
</script>

<style lang='scss'>
    page{
        .head-fixed{
            font-size: $font-base;
            position: fixed;
            z-index: 996;
            .left{

            }
            .right{
                width: 15%;
                text-align: right;
            }
        }
        .goods-list{
            padding: 30rpx 30rpx 200rpx 30rpx;
            /* #ifdef H5 */
            margin-top: 100rpx;
            /* #endif */
            /* #ifdef MP-WEIXIN */
            margin-top: 100rpx;
            /* #endif */

            .goods{
                background-color: #FFFFFF;
                padding: 20rpx 20rpx 20rpx 15rpx;
                .checkbox{
                    padding: 0 5rpx 0 10rpx;
                    height: 180rpx;
                }
                image{
                    width: 180rpx;
                    height: 180rpx;
                    display: block;
                }
                .info{
                    width: 68%;
                    height: 180rpx;
                    .title{
                        font-size: $font-lt;
                        font-weight: bold;
                    }
                    .desc{
                        color: $uni-text-color-grey;
                        font-size: $font-sm;
                    }
                    .money{
                        font-size: $font-base;
                        .left{
                            .vip-price{
                                color: $-wash-price-color;
                            }
                            .price{

                            }
                        }
                        .right{

                        }

                    }

                }

            }
        }
        .foot-fixed{
            position: fixed;
            border-bottom:1px solid #f9f9f9;
            font-size: $font-base;
            .total-price{
                color: $-wash-price-color;
            }
            .pay-btn{
                padding: 15rpx 40rpx;
                color: #FFFFFF;
                border-radius: 50rpx;
            }
        }
    }

</style>
